<template>
  <div class="table-box">
    <ProTable ref="proRef" :columns="columns" :request-api="listLou" :init-param="initParam">
      <template #tableHeader>
        <el-button type="success" @click="opera(undefined)">创建楼盘</el-button>
        <el-button type="danger">批量删除</el-button>
      </template>
      <template #opera="{ row }">
        <el-button type="primary" link :icon="EditPen" @click="opera(row)">编辑</el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteLou(row.id)">删除</el-button>
      </template>
      <template #hasUse="{ row }">
        <el-tag type="success" v-show="row.hasUse == 2">已使用</el-tag>
        <el-tag type="info" v-show="row.hasUse == 1">未使用</el-tag>
      </template>
    </ProTable>
    <loupanDialog ref="louRef"></loupanDialog>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { reactive, ref, onBeforeMount } from "vue";
import { listLou, createLou, editLou, deleteLou as deleteLouApi } from "@/api/modules/region";
import { EditPen, Delete } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import { getRegion } from "@/api/modules/region";
import loupanDialog from "./components/loupanDialog.vue";
import { useHandleData } from "@/hooks/useHandleData";

const deleteLou = async (id: any) => {
  try {
    await useHandleData(deleteLouApi, { ids: [id] }, "删除选中内容");
    await proRef.value?.getTableList();
  } catch (error) {}
};

const route = useRoute();

const initParam = reactive({ pageSize: 10, pageNum: 1, regionId: parseInt(route.query.id as string) });

const proRef = ref<InstanceType<typeof ProTable> | null>();

const getHasUse = () => {
  return new Promise(res => {
    res({
      code: 200,
      msg: "成功",
      data: [
        { label: "是", value: 1 },
        { label: "否", value: 2 }
      ]
    });
  });
};

const columns: ColumnProps[] = [
  { prop: "sort", label: "排序值" },
  { prop: "belongName", label: "所属区域" },
  {
    prop: "regionId",
    label: "所属区域",
    isShow: false,
    search: { el: "cascader", props: { props: { emitPath: false, value: "id", label: "name" } } },
    enum: () => {
      return new Promise(async res => {
        const { data } = await getRegion({ id: parseInt(route.query.id as string), pageSize: 9999, pageNum: 1 });
        res({ code: 200, msg: "成功", data: (data as any).list });
      });
    },
    fieldNames: { label: "name", value: "id" }
  },
  { prop: "name", label: "楼盘名称", search: { el: "input" } },
  { prop: "hasUse", label: "是否已使用", search: { el: "select" }, enum: getHasUse },
  { prop: "opera", label: "操作" }
];

const regionList = ref([]);

const getList = async () => {
  const { data } = await getRegion({ id: parseInt(route.query.id as string), pageSize: 9999, pageNum: 1 });
  regionList.value = (data as any).list;
};

const louRef = ref<InstanceType<typeof loupanDialog> | null>();

const opera = (row: any) => {
  const params: any = {
    row: row ? row : { name: "", regionId: undefined, sort: 1 },
    api: row ? editLou : createLou,
    getTable: proRef.value?.getTableList,
    regionList: regionList.value
  };
  louRef.value?.acceptParams(params);
};

onBeforeMount(async () => {
  Promise.all([getList()]);
});
</script>

<style></style>
